<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" >
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class MyInput extends React.Component {
            constructor(props) {
                super(props);
            }

            render() {
                return (
                    <div className="form-group">
                        <label htmlFor={this.props.myIdAndName} className="col-sm-2 control-label">{this.props.myLabelName}</label>
                        <div className="col-sm-8">
                            <input type="text" name={this.props.myIdAndName} id={this.props.myIdAndName} placeholder={this.props.myPlaceholder} className="form-control" />
                        </div>
                    </div>
                );
            }
        }
        
        class MyButton extends React.Component {
            constructor(props) {
                super(props);
            }

            render() {
                return (
                    <input type="button" value={this.props.btnName} className="btn btn-primary"/>
                );
            }
        }

        class MyForm extends React.Component {
            constructor(props) {
                super(props);
            }

            render() {
                return (
                    <div className="container">
                        <div className="row">
                            <form className="form-horizontal"> 
                                <MyInput myLabelName="用户名" myPlaceholder="请输入用户名" myIdAndName="username" />
                                <br />
                                <MyInput myLabelName="密码" myPlaceholder="请输入密码" myIdAndName="password" />
                                <br />
                                <div className="form-group">
                                    <div className="col-sm-8 text-center">
                                        <MyButton btnName="注册" />&nbsp;
                                        <MyButton btnName="登陆" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                );
            }
        }

        let oDiv = document.getElementById('app');

        ReactDOM.render(
            <MyForm />,
            oDiv
        );
    </script>
</body>
</html>